<template>
  <div id="balance">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <div>发票管理</div>
        </div>
      </template>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane
          v-for="item in tagsTitle"
          :key="item.id"
          :label="item.name"
          :name="item.id"
        >
          <div>
            <component
              :loading="loading"
              :is="mapN[activeName * 1]"
              :tableData="tableData"
              :taiTouTableData="taiTouTableData"
              @selectChangeType="selectChangeType"
              @clcikInfo="clcikInfo"
            ></component></div
        ></el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="box-card ps">
      <p>开票说明</p>
      <p>1）订单的支付时间必须在3个月内且未被开票；</p>
      <p>2）每月只可提交1次充值单的发票申请，建议月底集中提交</p>
    </el-card>
  </div>
</template>

<script setup>
import KaiPiao from './components/KaiPiao.vue';
import FaPiao from './components/FaPiao.vue';
import TaiTou from './components/TaiTou.vue';
// import ceshi from './components/ceshi.vue';
import { ref, onMounted, shallowRef } from 'vue';
import withdraw from '@/modules';
// invoiceListApi
const { fainvoiceApi, TaiInvoicetApi, invoiceListApi } = withdraw;
const activeName = ref('0'); // 对应的 Tab name
const tableData = ref([]);
const taiTouTableData = ref([]);
const loading = ref(false);

const mapN = shallowRef({
  0: FaPiao,
  1: KaiPiao,
  2: TaiTou,
});
const tableConfig = reactive({
  type: '1', //1 充值单 //2 开票记录
  page: 1,
  pageSize: 10,
});
const tagsTitle = ref([
  {
    id: '0',
    name: '发票申请',
  },
  {
    id: '1',
    name: '开票记录',
  },
  {
    id: '2',
    name: '抬头信息',
  },
]);
const selectChangeType = (val) => {
  tableConfig.type = val;
  tableDataList();
};
const handleClick = () => {
  tableData.value = [];
  if (activeName.value == '0') {
    tableDataList();
    TaiOdrenTableData();
  } else if (activeName.value == '1') {
    invoiceListableData();
  } else {
    TaiOdrenTableData();
  }
};
//发票
const tableDataList = () => {
  fainvoiceApi(tableConfig).then(({ data }) => {
    tableData.value = data.data;
    loading.value = false;
  });
};
//开票记录
const invoiceListableData = () => {
  const { page, pageSize } = tableConfig;
  invoiceListApi({ page, pageSize }).then(({ data }) => {
    tableData.value = data.data;
    loading.value = false;
  });
};
//抬头
const TaiOdrenTableData = () => {
  TaiInvoicetApi({ page: 1, pageSize: 1 }).then(({ data }) => {
    taiTouTableData.value = data.data;
    loading.value = false;
  });
};
//开票新增
const clcikInfo = () => {
  TaiOdrenTableData();
};
onMounted(() => {
  tableDataList();
  TaiOdrenTableData();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/global.scss';
:deep(.el-button--primary) {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
}
:deep(.el-tabs__item:hover) {
  color: var(--primary-color);
}
:deep(.el-tabs__active-bar) {
  background: var(--text-primary-color);
  height: 4px;
}
:deep(.el-button--primary):hover {
  opacity: 0.9;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: var(--text-regular-color);
  font-size: 32px;
  font-weight: 600;
}
:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 600;
}
.ps {
  padding: 20px 0;
  background: #fff;
  color: var(--text-regular-color);
  line-height: 20px;
  color: rgb(134, 144, 155);
  font-size: 14px;
}
</style>
<style lang="scss">
.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #000;
}
.el-radio__input.is-checked + .el-radio__label {
  color: var(--primary-color);
}
.el-radio__input.is-checked .el-radio__inner {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
</style>
